/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-07-14 13:36:06
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-12 17:11:10
 * @FilePath: /legion-iot/src/pages/dashboard/components/Superintend.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React from "react";
import { CapsuleChart } from "@jiaminghi/data-view-react";
import { theme } from "antd";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";

const colors = {
  0: "#65D2E8",
  1: "#94B5F1",
  2: "#F8CF72",
  3: "#75DFD5",
};

const CardItem = ({ title, value, color }) => {
  return (
    <div
      style={{
        backgroundColor: color,
        flex: 1,
        height: "100%",
        flexDirection: "column",
        color: "#fff",
        borderRadius: 4,
      }}
      className="center"
    >
      <b style={{ fontSize: 12 }}>{title}</b>
      <span style={{ fontSize: 12 }}>{value}</span>
    </div>
  );
};

function getMonthArray() {
  const currentDate = new Date(); // 获取当前日期
  const currentMonth = currentDate.getMonth(); // 获取当前月份（0-11）

  const months = []; // 用于存储月份的数组

  for (let i = 0; i <= currentMonth; i++) {
    const month = i; // 月份从1开始，所以需要加1
    const formattedMonth = month < 10 ? `0${month}` : `${month}`;
    months.push(formattedMonth);
  }

  return months;
}

export default function Superintend({ data = {} }) {
  const safer = data?.safer ?? {
    todata: {
      消控值班: parseInt(Math.random() * 10) + "人",
      今日巡检: parseInt(Math.random() * 10) + "%",
      当前隐患: parseInt(Math.random() * 10) + "10个",
      本年演练: `${parseInt(Math.random() * 10) }/${parseInt(Math.random() * 10) }个`,
    },
    month: [10, 5, 9, 2, 8, 3, 5, 3, 2, 6, 7, 3],
  };

  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  let xData = getMonthArray();

  let yData = safer?.month?.filter?.((it, i) => i < xData?.length),
    option = {
      title: {
        text: "隐患上报",
        textStyle: {
          color: "#999", // 标题颜色
          fontSize: 12, // 标题字号
        },
        left: -4,
      },
      grid: {
        top: "38px",
        left: "1%",
        right: "1%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: xData,
        axisLabel: { interval: 0 },
        axisLine: {
          show: false,
        },
        axisTick: { show: false },
      },
      yAxis: {
        type: "value",
        axisLabel: { show: false },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          data: yData,
          type: "bar",
          barWidth: 10,
          barGap: "25%",
          // 假设的y轴
          label: {
            show: true,
            // 文字颜色
            color: "#61B1F8",
            position: "top",
            formatter: "{c}",
            fontSize: 12,
          },
          itemStyle: {
            borderRadius: 10,
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                { offset: 0, color: "rgba(27, 132, 255, 1)" },
                { offset: 1, color: "rgba(27, 132, 255, 0)" },
              ],
            },
          },
        },
      ],
    };

  return (
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        padding: "10px 0 0 0 ",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div className="center" style={{ gap: 10, height: "24%", flexShrink: 0 }}>
        {safer?.todata
          ? Object.keys(safer?.todata)?.map?.((it, i) => {
              return (
                <CardItem
                  key={i}
                  title={it}
                  value={safer?.todata?.[it]}
                  color={colors[i]}
                ></CardItem>
              );
            })
          : null}
      </div>

      <div style={{ flex: 1, marginTop: 8 }}>
        <ReactECharts
          option={option}
          style={{ width: "100%", height: "100%" }}
        />
      </div>
    </div>
  );
}
